@tipsMainWeight: 250px;
@tipsMainHeight: 340px;

@tipsBtnWeight: 45px;
@tipsBtnHeight: calc(@tipsMainHeight / 3.2);


@alipay_frame_url : 'https://tanyiqu.gitee.io/tantip-cnblogs/src/imgs/alipay-frame.svg';

body {
    position: relative;
}



// 默认皮肤
#tantip {
    position: fixed;

    top: calc(50% - @tipsMainHeight/2);
    right: 0;
    cursor: pointer;

    // 不让全局的样式干扰里面
    div,
    p,
    a {
        margin: 0;
        padding: 0;
    }


    .tantip-btn {
        position: absolute;
        width: @tipsBtnWeight;
        height: @tipsBtnHeight;

        top: calc(@tipsMainHeight/2 - @tipsBtnHeight/2);
        left: -@tipsBtnWeight;

        background: rgba(33, 117, 188, .9);
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        p {
            height: 32px;
            line-height: 32px;
            margin: 0;
            padding: 0;
            color: #fff;
            font-size: 21px;
        }
    }

    .tantip-main {
        display: none;
        width: @tipsMainWeight;
        height: @tipsMainHeight;
        background: #fff;
        border: solid 1px #dbdbdb;

        p {
            line-height: 25px;
            font-size: 15px;
        }

        .tantip-main-header {
            width: 100%;
            height: 25px;
            background: #e7e7e7;

            p {
                text-align: center;
            }
        }

        .tantip-main-footer {
            width: 100%;
            height: 25px;
            background: #e7e7e7;

            p {
                text-align: right;

                a {
                    text-decoration: none;
                    color: #009fe9;
                    margin-right: 8px;
                }
            }
        }

        .tantip-main-content {
            width: 100%;
            height: calc(@tipsMainHeight - 50px);
            background: #fff;
            display: flex;
            flex-direction: column;
            align-items: center;

            // 放置二维码边框
            #qr-frame {
                width: 100%;
                flex: 1;
                background: url(@alipay_frame_url) no-repeat center;
                background-size: 60%;

                #tantip-img-frame {
                    width: 125px;
                    margin-top: 81px !important;
                    margin-left: 62px !important;
                }
            }

            // 切换二维码
            #change-qr {
                width: 100%;
                height: 48px;

                background: #eeeeee;

                display: flex;

                .qr-item {
                    flex: 1;
                    height: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    .qr-item-img {
                        width: 75%;
                    }

                    &:hover {
                        background: #fff;
                    }
                }
            }
        }
    }
}